<template>
  <div class="home">
    <b-container>
      <img
        class="img-fluid mb-3"
        v-lazy="domain + special.banner"
        style="width:100%;max-height:200px;"
      >
      <div
        class="card mb-2"
        v-for="item in show"
        :key="item.id"
      >
        <div class="card-header">{{item.title}}</div>
        <div class="card-body">
          <div class="row">
            <div
              class="col-md-6 border-bottom"
              v-for="list in item.list"
              :key="list.id"
            >
              <a
                target="_blank"
                v-if="list.url"
                :href="list.url"
                :title="list.title"
              >
                <div class="text-left py-2">
                  <img
                    class="float-left mr-2"
                    v-lazy="domain + '/' + list.thumb"
                    :alt="list.title"
                    v-if="list.thumb"
                    :key="list.thumb"
                  >
                  <h5 class="mt-0 text-dark d-block text-truncate">{{list.title}}</h5>
                  <p
                    class="abstract mb-0 text-muted"
                    v-if="list.description"
                  >{{list.description}}</p>
                </div>
              </a>
              <router-link
                target="_blank"
                v-else
                :to="'/show/'+ list.news_id"
                :title="list.title"
              >
                <div class="text-left py-2">
                  <img
                    class="float-left mr-2"
                    v-lazy="domain + '/' + list.thumb"
                    :alt="list.title"
                    v-if="list.thumb"
                    :key="list.thumb"
                  >
                  <h5 class="mt-0 text-dark d-block text-truncate">{{list.title}}</h5>
                  <p
                    class="abstract mb-0 text-muted"
                    v-if="list.description"
                  >{{list.description}}</p>
                </div>
              </router-link>

            </div>
          </div>
        </div>
      </div>
    </b-container>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex"
export default {
  name: "home",
  data () {
    return {
      template: '',
      domain: process.env.VUE_APP_baseURL
    };
  },
  props: ['special'],
  created () {
    this.setShow({ id: this.$route.params.id })
  },
  computed: {
    ...mapState('special', ['show'])
  },
  methods: {
    ...mapActions('special', ["setShow"])
  },
}
</script>
<style scoped>
.abstract {
  line-height: 2;
  font-size: 1rem;
  overflow: hidden;
  height: 4rem;
}
</style>
